import { Rate } from 'antd';
import icon_check from '@/assets/images/icons/check.svg';

const Wrap = css.div`
  >.price-wrap{
    ${_gb.flex()};
    justify-content: flex-start;
    margin-top: 36px;
    span.price{
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      color: #CD4D43;
    }
    span.src-price{
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      color: #AAAAAA;
      margin: 0 8px;
    }
    span.label{
      display: inline-block;
      font-weight: 700;
      font-size: 12px;
      line-height: 18px;
      color: #FFFFFF;
      background: #000;
      padding: 0 4px;
    }
  }
  >.title{
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
    margin: 8px 0;
  }
  >.rate{
    span.tips{
      margin-left: 6px;
      color: #777;
    }
  }
  >.tags{
    padding: 12px;
    background: #F6F6F6;
    margin: 0 -12px;
    ${_gb.flex()};
    justify-content: flex-start;
    margin-top: 16px;
    span{
      ${_gb.flex()};
      justify-content: flex-start;
      b{
        margin-left: 4px;
      }
    }
    span + span{
      margin-left: 16px;
    }
  }
  >.detail-wrap{
    padding: 16px 0;
    user-select: none;
    iframe{
      width: 100%;
      min-height: 280px;
      video{
        width: 100vw;
      }
    }
    img, video{
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 8px 0;
    }
  }
`;

const ProductInfo = ({ data }) => {
  return (
    <Wrap>
      <div className="price-wrap">
        <span className="price">NT${data?.sale_price}</span>
        <span className="src-price">NT${data?.src_price}</span>
        <span className="label">
          -{_util.bn.times(_util.bn.div(+data?.src_price - data?.sale_price, data?.src_price), 100, 0)}%
        </span>
      </div>
      <div className="title">{data?.name}</div>
      <div className="rate">
        <Rate disabled allowHalf defaultValue={4.5} />
        <span className="tips">(4.9)</span>
      </div>
      <div className="tags">
        <span>
          <Icon component={icon_check} />
          <b>免運費</b>
        </span>
        <span>
          <Icon component={icon_check} />
          <b>貨到付款</b>
        </span>
        <span>
          <Icon component={icon_check} />
          <b>15天鑑賞期</b>
        </span>
      </div>
      <div className="detail-wrap" dangerouslySetInnerHTML={{ __html: data?.content }}></div>
    </Wrap>
  );
};

export default ProductInfo;
